<template>
	<view class="container">
		<view class="header">
			<view class="header-wrapper u-f-column">
				<image src="../../static/hgzybg.png" class="header_wrapper_bg"></image>
				<view class="header_wrapper_top">
					<image class="header_wrapper_top_user" :src="userInfo.avatar || '/static/missing-face.png'"></image>
					<view class="header_wrapper_top_news">
						<text class="header_wrapper_top_news_name">{{ userInfo.nickname || userInfo.account || '去登陆' }}</text>
						<text class="header_wrapper_top_news_id">ID:{{ userInfo.id }}</text>
					</view>
					<!-- <view class="header_wrapper_top_vip">
						<image src="/static/img/bal_icon04.png"></image>
						<text>商户等级</text>
					</view> -->
				</view>
				<view class="header_wrapper_buttom">
					<view class="header_wrapper_buttom_eve">
						<text>花果</text>
						<text>{{listBox.count_total}}</text>
					</view>
					<view class="header_wrapper_buttom_eve">
						<text>弘花</text>
						<text>{{listBox.count1}}</text>
					</view>
					<view class="header_wrapper_buttom_eve">
						<text>弘果</text>
						<text>{{listBox.count2}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="btn">
			<view class="btn_eve" :class="btnNum==1?'active':''" @click="btn(1)">
				弘花({{listBox.count1}})
			</view>
			<view class="btn_eve" :class="btnNum==2?'active':''" @click="btn(2)">
				弘果({{listBox.count2}})
			</view>
		</view>
		<view class="list">
			<view class="list_eve" v-for="(goods, index) in listBox.list" :key="index">
				<image :src="goods.avatar"></image>
				<view class="list_eve_news">
					<text class="list_eve_news_name">{{goods.nickname}}</text>
					<view>
						<text>ID:{{goods.id}}</text>
						<text>注册时间:{{goods.create_at}}</text>
					</view>
				</view>
			</view>
			<!-- <view class="list_eve">
				<image src="/static/img/bal_icon04.png"></image>
				<view class="list_eve_news">
					<text class="list_eve_news_name">自由之翼</text>
					<view>
						<text>ID:684936</text>
						<text>注册时间：2020-11-08</text>
					</view>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	import uicons from '@/components/uni-icons/uni-icons.vue';
	export default {
		components: {
			uicons
		},
		data() {
			return {
				userInfo: '',
				listBox:{},
				btnNum: 1
			};
		},
		onShow: function() {
			this.getUserInfo()
				this.getList()
		},
		methods: {
			btn(num) {
				console.log(num)
				this.btnNum = num;
				this.getList()
			},
			withdraw() {
				var that = this;
				uni.showModal({
					title: '温馨提示',
					content: '是否将子账号余额提取到主账号',
					success: function(res) {
						if (res.confirm) {
							that.$Request.get(that.$api.user.withdrawal, {}).then(function(res) {
								// var list = res.data;
								// that.user = list;
								// that.$api.msg(res.info);
								// if (res.code == 1) {
								// 	setTimeout(function() {
								// 		uni.navigateBack({
								// 			delta: 1
								// 		});
								// 	}, 500);
								// }
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})

			},
			getUserInfo() {
				var that = this;
				// 获取用户信息
				that.$Request.post(that.$api.userNews.info).then(res => {
					console.log('获取用户信息',res)
					that.userInfo = res.data
				},err => {
					uni.navigateTo({
						url: '/pages/login/login'
					});
					console.log("err: " + JSON.stringify(err));
				});
				
			},
			getList(){
				var that = this;
				// 获取花果信息列表
				that.$Request.get(that.$api.user.getMyTeam, {
					layer:that.btnNum
				}).then(function(res) {
					that.listBox = res.data;
				});
			},
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		background: #f3f3f3;

		.header {
			position: relative;
			width: 750rpx;
			height: 420rpx;

			.header-img {
				width: 100%;
				height: 100%;
			}

			.header-wrapper {
				box-sizing: border-box;
				position: absolute;
				bottom: 0rpx;
				left: 20rpx;
				width: 710rpx;
				height: 380rpx;
				padding: 70rpx 0 30rpx;
				background-color: $uni-bg-color;
				border-radius: 20rpx;
				// background: #FF854B;
				// background: url(../../static/hgzybg.png);
				// background-size: 100% 100%;
				.header_wrapper_bg{
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
				}
				.header_wrapper_top {
					display: flex;
					align-items: center;
					justify-content: flex-start;
					position: relative;
					z-index: 10;
					margin-bottom: 50rpx;

					.header_wrapper_top_user {
						width: 130rpx;
						height: 130rpx;
						border: 50%;
						margin-left: 36rpx;
						border-radius: 50%;
					}

					.header_wrapper_top_news_name {
						font-size: 32rpx;
						color: #fff;
						margin-left: 20rpx;
						display: block;
					}

					.header_wrapper_top_news_id {
						font-size: 24rpx;
						color: #fff;
						margin-left: 20rpx;
						line-height: 2.8;
						display: block;
					}

					.header_wrapper_top_vip {
						position: absolute;
						top: 0rpx;
						right: 0rpx;
						height: 80rpx;
						width: 220rpx;
						background: #F7E2B8;
						border-top-left-radius: 60rpx;
						border-bottom-left-radius: 60rpx;
						display: flex;
						align-items: center;
						justify-content: space-around;

						image {
							width: 50rpx;
							height: 50rpx;
							border-radius: 50%;
							border-radius: 50%;
						}

						text {
							color: #333;
						}
					}
				}

				.header_wrapper_buttom {
					display: flex;
					align-items: center;
					justify-content: space-around;
					.header_wrapper_buttom_eve {
						text {
							position: relative;
							z-index: 10;
							font-size: 32rpx;
							margin-bottom: 8rpx;
							display: block;
							color: #fff;
						}

					}
				}

			}
		}

		.btn {
			display: flex;
			align-items: center;
			justify-content: space-around;
			margin: 30rpx 0;

			.btn_eve {
				font-size: 32rpx;
				padding: 15rpx 80rpx;
				border-radius: 60rpx;
			}

			.btn_eve.active {
				color: #fff;
				background: #FF854B;
			}
		}

		.list {
			.list_eve {
				margin: 0 20rpx;
				border-bottom: 1rpx solid #ccc;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 100rpx;
					height: 100rpx;
					border: 50%;
					margin-right: 36rpx;
					border-radius: 50%;
				}

				.list_eve_news {
					width: 80%;

					.list_eve_news_name {
						font-size: 32rpx;
						color: #333;
					}

					view {
						display: flex;
						align-items: center;
						justify-content: space-between;

						text {
							font-size: 24rpx;
							color: #666;
							line-height: 2.8;
						}
					}
				}

			}
		}

	}
</style>
